<template>
  <el-tabs
    type="border-card"
    stretch
  >
    <el-tab-pane
      label="艺人认证"
      index="certification"
    >
      <el-form
        label-width="110px"
        ref="certForm"
        :rules="certFormRules"
        :model="certFormData"
      >
        <el-form-item
          label="艺名"
          prop="stageName"
        >
          <el-input
            v-model="certFormData.stageName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="所属影视公司"
          prop="company"
        >
          <el-input
            v-model="certFormData.company"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="真实姓名"
          prop="realName"
        >
          <el-input
            v-model="certFormData.realName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号"
          prop="idCard"
        >
          <el-input
            v-model="certFormData.idCard"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :style="{ width: '100%' }"
            @click="handleCert"
          >提交认证</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  name: 'Certification',
  data() {
    return {
      certFormData: {},
      certFormRules: {
        stageName: [{ required: true, message: '请输入艺名!', trigger: 'blur' }],
        company: [{ required: true, message: '请输入所属影视公司!', trigger: 'blur' }],
        realName: [{ required: true, message: '请输入真实姓名!', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入身份证号!', trigger: 'blur' }],
      },
    };
  },
  methods: {
    ...mapActions([
      'certificate',
    ]),
    handleCert() {
      this.$refs.certForm.validate((valid) => {
        if (valid) {
          this.certificate({ id: 1, ...this.certFormData })
            .then((meta) => {
              this.$message.success(meta.msg || '提交认证成功!');
            })
            .catch((meta) => {
              this.$message.error(meta.msg || '提交认证失败!');
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-tabs {
  width: 450px;
  margin: 50px auto;
}

.el-form-item {
  padding: 0 20px;
}
</style>
